import VCard from "../components/VCard.vue";
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper/swiper-bundle.min.js";
import { getPortPlanInfo } from "@/api/networShow/dataV";
import { mapState } from "vuex";
const MIXIN = {
  components: {
    VCard
  },
  props: {
    tag: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      listData: [],
      mySwiper: null,
      id: "", // 轮播图唯一Id 使用时请一定自定义
      maxLength: 7 // 轮播最大长度
    };
  },
  computed: {
    ...mapState({
      centerMap: state => state.dataV.centerMap,
      centerMapOnload: state => state.dataV.centerMapOnload,
      truckjson: state => state.dataV.truckjson,
      hanlder: state => state.dataV.hanlder
    })
  },
  watch: {
    tag() {
      this.getListData()
    },
    listData: {
      handler(newVal) {
        if (newVal.length > this.maxLength) {
          this.$nextTick(() => {
            if (this.mySwiper) {
              this.mySwiper.update();
            } else {
              this.initSwiper();
            }
          });
        } else {
          if (this.mySwiper) {
            this.mySwiper.destroy(true, true);
            this.mySwiper = null;
          }
        }

      },
      deep: true
    }
  },
  methods: {
    initSwiper() {
      const _this = this;
      _this.$nextTick(() => {
        _this.mySwiper = new Swiper(`#${_this.id}`, {
          loop: true,
          autoplay: {
            delay: 4000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          direction: "vertical",
          slidesPerView: _this.maxLength,
          observer: true,
          observeParents: false
        });
      });
    },
    handleParentClick(e) {
      if (this.tag != 1) {
        return;
      }
      const parentEl = e.target.parentNode;
      const index =
        parentEl.getAttribute("data-index") ||
        parentEl.parentNode.getAttribute("data-index");
      if (index != null && this.handleMap) {
        this.handleMap(index);
      }
    },
  },

  async mounted() {
    await this.getListData(); // 需要自定义一个getListData方法 用于获取列表数据
  }
}

export default MIXIN;